<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 列表 -->
            <div style="padding:10px 0"><span>跨平台调拨单号：</span><span>{{order_no}}</span></div>
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label='序号' width="50">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="图片" prop="creat_time" width="80">
                    <template slot-scope="scope">
                        <div v-viewer="options" class="images fit">
                            <img :src="scope.row.thumb" :data-source="scope.row.img" class="image" :key="scope.row.thumb" :alt="scope.row.img.split('?image=').pop()">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="名称">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showInfo(scope.row.gift_id)">{{scope.row.gift_name}}</el-button>
                    </template>                    
                </el-table-column>
                <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
                <el-table-column align="center" label="成本价(元)" prop="money_cost"></el-table-column>
                <el-table-column align="center" label="调拨数量(个)" prop="order_num"></el-table-column>
                <el-table-column align="center" label="实收数量(个)" prop="arrive_num"></el-table-column>
                <el-table-column align="center" label="调拨金额(元)" prop="order_money"></el-table-column>
                <el-table-column align="center" label="实收金额(元)" prop="arrive_money"></el-table-column>
            </el-table>
        </div>
        <!-- 弹框 -->
        <el-dialog width="400px" title="礼品其他信息" :visible.sync="infoDialog">
            <div class="info_dialog">
                <div>名称：{{gift_info.name}}</div>
                <div>礼品编号：{{gift_info.id}}</div>
                <div>神采编号：{{gift_info.no_obsolete}}</div>
                <div>国标码：{{gift_info.gb_code}}</div>
                <div>一级类别：{{gift_info.one_type}}</div>
                <div>二级类别：{{gift_info.tow_type}}</div>
                <div>三级类别：{{gift_info.three_type}}</div>
                <div>材质：{{gift_info.texture}}</div>
                <div>产品尺寸：{{gift_info.product_size}}</div>
                <div>包装尺寸：{{gift_info.packing_size}}</div>
            </div>
        </el-dialog>
        <!-- 自定义底部 -->
        <!-- <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
        </div> -->
    </div>
</template>
<script>
    import {
        getList,
        getInfo,
    } from "@/api/warehouse/kosDetail";
    export default {
        data() {
            return {
                listLoading:false,
                infoDialog:false,
                list:null,
                order_no:"",
                id:"",
                options: {  //预览图配置
                    toolbar: true,
                    url: 'data-source'
                },
                gift_info:{}
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if(vm.$route.params.routerflag){
                    vm.order_no=vm.$route.params.order_no;
                    vm.id=vm.$route.params.id;
                    vm.fatchData()
                }
            })
        },
        methods: {
            //获取礼品信息
            showInfo(id){
                this.gift_info={};
                getInfo({id}).then(res=>{
                    if(res.code==1){
                        res.message[0].gb_code=res.message.gb_code==0?"":res.message.gb_code;
                        this.gift_info=res.message[0];
                        this.infoDialog=true;
                    }
                })
            },
            getData(data){
                data.forEach(val=>{
                    val.money_cost=(val.money_cost/1000000).toFixed(2);
                    val.arrive_money=(val.arrive_num*val.money_cost).toFixed(2);
                    val.order_money=(val.order_num*val.money_cost).toFixed(2);
                });
                this.list = data;
            },
            fatchData(){
                this.listLoading=true;
                this.list=[];
                getList({order_id:this.id}).then(res=>{
                    this.getData(res);
                    this.listLoading=false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .order_info,.rece_info{
        margin-bottom: 14px;
        .info_item{
            display: inline-block;
            width: 300px;
            margin-bottom: 10px;
        }
    }
    .order_title{
        margin-bottom: 10px;
    }
    .info_dialog{
        div+div{
            margin-top: 10px;
        }
    }
</style>